<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>DataTable</title>
<style type="text/css">
<!--
.style1 {color: #993333}
-->


.HeaderStyle td	{
	background-color: #F4EDFC;
	height:31px;
}
.ContentStyle td	{
	background-color:#FFFFFF
	height:26px;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
}
.textAreaStyle	{
	width:100px;
	height:40px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;	
}
</style>
</head>
<script type="text/javascript" src="prototype.js"></script>
<body>
<div id="maindiv">
 
 
 <div id="top">
   <div id="mobdiv">
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
   </div>
  
  <div id="contbg">
  
  <div id="menubar" >
 <a href="#" > New List </a> <a href="#">My Lists</a> <a href="#" style="margin-left:600px;">Signout</a>
 <div class="clear"></div>
  
  </div>
  
  
    <div id="contsec">
   <div id="topbar">
   <div id="topleft"></div>
   
   <div id="topright">
   
   Url : http://www.listshare.com/school<br />
   Shared Key : password 
   </div>
   
   
   </div>
   
   
     <div id="middlearea">
     <table width="900" border="0" align="center" cellpadding="3" cellspacing="3">
     	<tbody id="dataTable">
 
  		</tbody>
	</table>

     
     </div>
    
    
     </div>
     </div>
   <div id="cpyrght"></div>   
  </div>
 </div>


</body>
<script type="text/javascript">

/**
*	Version: 0.1
*	Developer: Sanil S
*	Job: Technology Evangelist
*	Blog: http://www.iamatechie.com
*/

DataTable = {
	
	Version: "0.1",
	
	initialize: function() {
		
		//alert($(this.DataTableID).innerHTML);
		//$(this.DataTableID).innerHTML = "";
		var header_length = this.Header.length;
		
		/**
		*	Set up the header
		*/
		var headerRow = document.createElement("tr");
		
		headerRow.className = "HeaderStyle";
		
		$(this.DataTableID).appendChild(headerRow);
		
		Event.observe(document, 'click', this.DocumentClick);
		
		for(key=0;key<header_length;key++)	{
			var oneHeader = document.createElement("td");
			oneHeader.innerHTML = this.Header[key];
			//alert(oneHeader.innerHTML);
			//oneHeader.click = "this.respondToClickHeader();"
			headerRow.appendChild(oneHeader);	
			Event.observe(oneHeader, 'click', this.respondToClickHeader);
		}
		
		/**
		*	Set Up content and fill the data table
		*/
		var content_length = this.DataSource.length;
		for(content_key=0;content_key<content_length;content_key++)	{
			var thisRow = this.DataSource[content_key];
			var oneRow = document.createElement("tr");
			oneRow.className = "ContentStyle";
			$(this.DataTableID).appendChild(oneRow);
			
			for(header_key=0;header_key<header_length; header_key++)	{
				 var oneColumn = document.createElement("td");
				 oneColumn.id = thisRow['ID'] + "," + this.ColumnMapping[header_key][this.Header[header_key]];
				 oneColumn.innerHTML = thisRow[this.Header[header_key]];
				 oneRow.appendChild(oneColumn);
				 Event.observe(oneColumn, 'click', this.respondToClickContent);
			}
		}
	},
	
	
	
	Header:	["SL", "Name", "Email", "Mobile", "Location", "Sex"],
	
	ColumnMapping: [{SL: "column1"}, {Name: "column2"}, {Email: "column3"}, {Mobile: "column4"}, {Location: "column5"}, {Sex: "column6"}],
	
	DataSource: [
        {ID:"1", SL: "1", Name:"SANIL", Email:"sanil@mobme.in", Mobile:"9895270073", Location:"Kollam", Sex:"Male"},
		{ID:"2", SL: "1", Name:"SANIL", Email:"sanil@mobme.in", Mobile:"9895270073", Location:"Kollam", Sex:"Male"},
		{ID:"3", SL: "1", Name:"SANIL", Email:"sanil@mobme.in", Mobile:"9895270073", Location:"Kollam", Sex:"Male"},
		{ID:"4", SL: "1", Name:"SANIL", Email:"sanil@mobme.in", Mobile:"9895270073", Location:"Kollam", Sex:"Male"},
		{ID:"5", SL: "1", Name:"SANIL", Email:"sanil@mobme.in", Mobile:"9895270073", Location:"Kollam", Sex:"Male"},
		{ID:"6", SL: "1", Name:"SANIL", Email:"sanil@mobme.in", Mobile:"9895270073", Location:"Kollam", Sex:"Male"},
        
    ],
	
	DataTableID: "dataTable",
	
	respondToClickHeader : function(event)	{
		var element = event.element();
		var content = element.innerHTML;
		/**
		*	Already TextArea inside the cell
		*/
		if(element.getElementsByTagName("textarea").length != 0)
		return;
		
		element.innerHTML = "";
		
		var textArea = document.createElement("textarea");
		textArea.value = content;
		element.insert(textArea);
		['mouseout', 'blur'].each(function (whichEvent)	{
			Event.observe(textArea, whichEvent, function() {
				var value = textArea.value;
				//element.remove(textArea);
				textArea.remove();
				
				element.innerHTML = value;
				if(content != value)	{
					
					var headerLength = DataTable.Header.length;
					
					for(key=0;key<headerLength;key++)	{
						if(content == DataTable.Header[key])	{
							DataTable.Header[key] = value;
							Event.stopObserving(textArea, whichEvent, false);
							/**
							*	Do AJAX update here
							*/
							break;
							
						}
						
					}
				}
			});
		});
	},
	
	respondToClickContent : function(event)	{
		var element = event.element();
		var content = element.innerHTML;
		if(content == "&nbsp;")
		content = "";
		
		/**
		*	Already TextArea inside the cell
		*/
		if(element.getElementsByTagName("textarea").length != 0)
		return;
		element.innerHTML = "";

		
		
		var textArea = document.createElement("textarea");
		textArea.className = "textAreaStyle";
		textArea.value = content;
		element.insert(textArea);
		this.isContentTextbox = true;
		Event.observe(textArea, 'blur', function () {
			var value = textArea.value;

				textArea.remove();
				/**
				*	Do AJAX update here
				*/
				//alert(element.id);
				element.innerHTML = value;
				Event.stopObserving(textArea, 'blur', false);
				
		});
		
		textArea.observe('mouseout', function () {
				var value = textArea.value;

				textArea.remove();
				//alert(element.id);
				/**
				*	Do AJAX update here
				*/
				element.innerHTML = value;
				Event.stopObserving(textArea, 'mouseout', false);
				
		});
	},
	
	addRow: function()	{
		var newRow = Array();
		var header_length = this.Header.length;
		newRow['ID'] = "";
		for(key=0;key<header_length;key++)	{
			newRow[this.Header[key]] =  "&nbsp;";
		}
		//newRow = newRow.substring(0, newRow.length-2);
		//alert(newRow);
		this.DataSource.push(newRow);

	},
	
	DocumentClick: function()	{
		alert('Document Click');
	}
	
};


DataTable.initialize();


</script>
</html>
